<template>
  <div class="news-detail-container" v-if="news.title">
    <h2 class="news-title-detail">{{ news.title }}</h2>
    <div class="news-meta-detail">
      <p>发布时间: {{ news.createTime }}</p>
    </div>
    <div class="news-content-detail" v-html="formattedContent"></div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      news: {},
      formattedContent: ''
    };
  },
  created() {
    this.getNewsDetail();
  },
  methods: {
    getNewsDetail() {
      this.request.get(`/news/${this.$route.params.id}`).then(res => {
        this.news = res.data;
        // 假设后端返回的 createTime 是一个时间戳或 ISO 字符串
        this.news.createTime = new Date(this.news.createTime).toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false // 使用 24小时制
        });
        this.formattedContent = this.formatContent(this.news.content);
      });
    },
    formatContent(content) {
      // 将字符串中的换行符替换为段落标签
      const paragraphs = content.split(/\n/).map((p, index) => `<p class="indent">${p}</p>`);
      return paragraphs.join('');
    }
  }
};
</script>

<style>
/* 页面整体样式 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* 保证页面占满视口高度 */
  overflow-y: auto; /* 保证整个页面可滚动 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9fafb;
  color: #333;
}

/* 内容容器样式 */
.news-detail-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 1200px; /* 页面宽度 */
  margin: 20px auto; /* 居中 */
  box-sizing: border-box; /* 包括内边距 */
  /* 高度和溢出由 body 和 html 控制 */
  min-height: 100vh; /* 确保容器至少占满整个视口高度 */
}

/* 标题样式 */
.news-title-detail {
  color: #333;
  font-size: 28px;
  text-align: center; /* 标题居中 */
  margin-bottom: 20px;
}

/* 元信息样式 */
.news-meta-detail {
  font-size: 14px;
  color: #666;
  text-align: center; /* 元信息居中 */
  margin-bottom: 20px;
}

/* 内容样式 */
.news-content-detail {
  font-size: 18px;
  line-height: 1.8;
  color: #444;
  text-indent: 2em; /* 段落首行缩进两个中文字符 */
}

.news-content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 4px;
}

.news-content p {
  margin-bottom: 15px;
}
</style>
